import { Link, useNavigate } from "react-router-dom";

const Login = () => {
    const navigate = useNavigate()
    return (
        <div>
            <h3>LOGIN</h3>
            <button onClick={()=> navigate('/article')}>Submit</button>
            <p></p>
            <button onClick={()=> navigate('/article?id=1001&name=jack')}>searchParams传参</button>
            <p></p>
            <button onClick={()=> navigate('/news/1001/jack')}>params传参</button>
            <p></p>
            <button onClick={()=> navigate('/mqtt')}>MQTT</button>
            <p></p>
            <Link to='/layout'>to layout</Link>
        </div>
    )
}

export default Login;

/**
 * 编程式导航
 * 
 * 通过`useNavigate`钩子得到导航方法，然后通过调用方法以命令的形式进行路由跳转，这样更加灵活。
 */